/**
* Created by wl
*预警项目》列表页
*/
<template>
    <div>
        <div class="right">
            <el-row class="ca-title">
                <el-col :span="12">
                    <h3>预警项目</h3>
                </el-col>
                <el-col :span="12">
                    <div class="ca-pull-right">
                        <el-input  placeholder="项目名称，支持模糊查询" v-model="itemName" class="ca-w-280 ca-m-r-15"  @keyup.enter.native="getAlarmList">
                            <el-button slot="append" icon="el-icon-search" @click="getAlarmList"></el-button>
                        </el-input>
                        <!-- <el-button type="button" @click='downloadFile' class="ca-btn ca-btn-default ca-tp-8"><i class="fa fa-download ca-m-r-5"></i><span>下载</span></el-button> -->
                        <el-button class="ca-color-download" @click="downloadFile" :disabled="!isAuthDown">下载</el-button>
                    </div>
                </el-col>
            </el-row>
            <div class="ca-m-t-15">
                <el-table
                    :data="alarmList"
                    style="width:100%" class="table_p_01 ca-table">
                    <el-table-column label="序号" type="index" align="center" width="80px">
                        <template slot-scope="scope">
                            {{scope.$index+1}}
                            <!-- <csRedDot :label="scope.$index+1+''" :showDot="scope.row.red==1?true:false" :type="1"></csRedDot> -->
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="项目名称"
                        prop="itemName">
                        <template slot-scope="scope">
                            <el-tooltip :content="scope.row.itemName" placement="top">
                                <el-button type="text" class="ca-underline ca-text-over-flow-ellipsis" @click="goIndex(scope.row.itemId)" :disabled="!isAuthAlarm">{{scope.row.itemName}}</el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="预警时间"
                        prop="groupDate">
                        <template slot-scope="scope">
                            {{$moment(scope.row.groupDate).format('YYYY-MM-DD')}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="预警类型">
                        <template slot-scope="scope">
                            <p @click="showDialog(scope.row)" class="el-pointer">
                                <span type="text" v-if="scope.row.follows !== null" class="el-yellow">关注：{{scope.row.follows.length}}</span>
                                <span type="text" v-if="scope.row.warnings !== null" class="el-red">预警：{{scope.row.warnings.length}}</span>
                            </p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="项目组建议持有策略">
                        <template slot-scope="scope">
                            {{scope.row.teamProposal | getNameById('investStrategyType')}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="投后建议持有策略">
                        <template slot-scope="scope">
                            {{scope.row.holdStrategy | getNameById('investStrategyType')}}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-dialog
                :visible.sync="dialogVisible"
                width="30%">
                <div v-for='(item, index) in followsList' :key="index">
                    <p>
                        <el-button type="text" :class="{'btn-yellow': item.remindLevel == 1, 'btn-red': item.remindLevel == 0}">{{item.remindLevel === 1? "关注" : "预警"}}</el-button>
                        <span class="el-fat">{{item.remindTime == null ? '' : $moment(item.remindTime).format('YYYY-MM-DD')}}</span>
                        <span class="el-fat">{{item.title}}</span>
                    </p>
                    <p class="el-center">
                        <span v-if="item.symbol == '介于'">{{item.remindKey}}介于{{item.threshold}}--{{item.threshold2}}</span>
                        <span v-else>{{item.remindKey}}{{item.symbol}}{{item.threshold}}</span>
                    </p>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import {api} from './api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    import { isNoAuth } from '__service/utils';
    export default {
        data() {
            return {
                alarmList: [], //预警列表
                dialogVisible: false,
                itemName: '', //筛选项目名称
                itemNameCopy: '',
                followsList: [],
                isAuthAlarm: isNoAuth('预警项目-列表页-查看'),
                isAuthDown: isNoAuth('预警项目-列表页-下载'),
            }
        },
        watch: {
        },
        props: {},
        mounted() {
            this.getAlarmList();
        },
        beforeRouteEnter(to, from, next) {
            next(vm=>{
                if (!vm.isAuthAlarm) {
                    vm.$message({
                        message: '没有此页面的操作权限',
                        type: 'error',
                        center: true
                    });
                    vm.$router.replace({name: 'personal-center', params: {tabIndex: 0}})
                    return;
                }
            });
        },
        methods: {
            showDialog(data) {
                this.dialogVisible = true
                this.followsList = []
                if (data.follows === null) {
                    data.follows = [...data.warnings]
                } else if (data.warnings === null) {
                    this.followsList = [...data.follows]
                } else {
                    this.followsList = [...data.follows,...data.warnings]
                }
            },
            getAlarmList() {
                let query = {
                    itemName: this.itemName,
                }
                apiHttp(api.ALARM_LIST, query).then( ret => {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        this.alarmList = ret.data
                        ret.data.map((item, index) => {
                            if (item.itemFinanceManagement === null) {
                                 this.alarmList[index].holdStrategy = ''
                                 this.alarmList[index].teamProposal = ''
                            } else {
                                this.alarmList[index].holdStrategy = item.itemFinanceManagement.holdStrategy
                                this.alarmList[index].teamProposal = item.itemFinanceManagement.teamProposal
                            }
                        })
                        this.itemNameCopy = this.itemName;
                    }
                })
            },
            goIndex(row) {
                this.$router.push({name: 'invested-project-detail', params: {itemId: row, tabIndex: 6, openWindow: true }});
            },
            // 文件下载
            downloadFile() {
                if (this.alarmList.length === 0) {
                    this.$message({
                        type: 'warning',
                        message: '无数据!',
                        center: true
                    });
                } else {
                    window.open(this.baseURL + api.EXPORT_FILE.url + '?X-Token=' + this.$store.state.user.token + '&type=20&name=' + this.itemNameCopy );
                }
            },
        },
        components: {
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-pointer {
    cursor: pointer;
}
.el-yellow {
    color: #ffa500;
}
.el-red {
    color: #ff0000;
}
.btn-red {
    background: #ff0000;
    color:white;
    padding: 8px 12px;
    border-radius: 10px;
}
.btn-yellow {
    background: #ffa500;
    color:white;
    padding: 8px 12px;
    border-radius: 10px;
}
.el-fat {
    font-size: 16px;
    font-weight: 900px;
    margin-left: 10%;
}
.el-center {
    margin-left: 10%;
    font-size: 14px;
    margin-top: 10px;
}
</style>
